<template>
  <div id="wrapper">
    <el-card class="box-card">
      <el-row>
        <el-col :xs="20" :sm="20" :lg="20" class="primary">自定义标签</el-col>
        <el-col :xs="4" :sm="4" :lg="4">
          <el-tooltip placement="top">
            <div slot="content">
              操作指南
            </div>
            <div class="icon-item">
              <a href="https://thundersoft.feishu.cn/docs/doccnCqzmURLgYNTZ9VZkLDQ8xb" target="_blank">
                <img :src="logo">
              </a>
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
      </el-row>
      <el-row>
        <el-col :xs="12" :sm="12" :lg="12" class="col-box">
          <span class="col-span">关键字：</span>
          <el-input v-model="params['keywords']" placeholder="查询关键字" @change="changeFilter"></el-input>
        </el-col>
        <el-col :xs="12" :md="12" :lg="12" style="text-align: right;">
          <el-button type="primary" @click="createTech()">新增</el-button>
        </el-col>
      </el-row>
      <el-table class="marT" :data="tableData" row-key="id" :border="true" :header-cell-style="{background:'#eef1f6'}" style="width:100%;" v-loading="loading">
        <el-table-column align="center" property="name" label="标签名称" width="150"></el-table-column>
        <el-table-column property="technical_field" label="技术领域">
            <template slot-scope="scope">
                <span style="display: inline-block;margin: 0 6px 6px 0" v-for="(v,i) in scope.row.technical_field" :key="i"> 
                    <el-tooltip placement="top" effect="light" v-if="v.name">
                        <div slot="content">{{v.display}}</div>
                        <el-tag type="primary">{{v.name.length > 20 ? v.name.substring(0,19)+'...':v.name}}</el-tag>
                    </el-tooltip>
                </span>
            </template>
        </el-table-column>
        <el-table-column align="center" property="create_ldap" width="150" label="创建人"></el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="150">
          <template slot-scope="scope">
              <!-- <el-button type="text" size="mini" @click="viewTech(scope.row.id)">
                查看
              </el-button> -->
              <!-- <el-button type="text" size="mini" @click="editTech(scope.row.id)">
                修改
              </el-button> -->
              <el-popconfirm title="确定删除吗？" @onConfirm="delTech(scope.row.id)">
                <el-button slot="reference" type="text" size="mini" style="color: red">
                  删除
                </el-button>
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="tableTotal > 10" background layout="prev, pager, next" :page-size="params.pageSize" @size-change="tableSizeChange" @current-change="tableCurrentChange" :current-page="params.pageNo" style="text-align: center" :total="tableTotal">
      </el-pagination>
    </el-card>
    <el-dialog title="自定义标签" :visible.sync="dialogVisible" width="60%" :destroy-on-close="true">
      <TechDialog v-if="dialogVisible" :singleFilterData="singleFilterData" :isEdit="isEdit" :id="specialId" @submit="submitDetail"></TechDialog>
    </el-dialog>
  </div>
</template>
<script>
import { getHeaderName } from '@/app.config'
import http from '@/views/sys/axios'
import { mapState, mapMutations } from 'vuex'
import techDialog from './components/techDialog.vue'
import { param } from '../../utils';

export default {
  components: {
    TechDialog: techDialog
  },
  data() {
    return {
      BACKEND_API: process.env.VUE_APP_SOURSE_MANAGE_HOST,
      dialogVisible: false,
      tableData: [],
      tableTotal: 15,
      itemFormData:{},
      calculated:{},
      childData: [],
      expands: [],
      week_col: [],
      params: {
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      isEdit: true,
      singleFilterData: [],
      specialId: '',
      logo: require('../../assets/question.png'),
    }
  },
  created() {
    this.getSingleFilter()
    this.getTechList()
  },
  mounted() {
    this.$nextTick(() => {})
  },
  methods: {
    getSingleFilter() {
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
        method: "get",
        headers: getHeaderName(),
      }).then(res => {
        this.singleFilterData = res.data.data
      })
    },
    getTechList() {
      this.loading = true
      let params = Object.assign({},this.params) 
      for(let key in params){
        if(params[key] == '') {
          delete params[key]
        }
      }
      this.$axios({
        url: this.BACKEND_API + '/api/v1/gap/custom',
        method: "get",
        headers: getHeaderName(),
        params: params
      }).then(res => {
        if(res.data.status == 403) {
          this.$message.error('您无查看权限');
          this.$router.push({
              path: '/'
          })
        }
        if(res.data.code == 200 && res.data.status != 403) {
            res.data.data.data.map(item => {
                item.childData = []
            })
            this.tableData = res.data.data.data
            this.tableTotal = res.data.data.totalCount
            this.loading = false
        }
        
      })
    },
    createTech(){
       this.specialId = ''
       this.isEdit = true
       this.dialogVisible = true
    },
    viewTech(id){
       this.specialId = id
       this.isEdit = false
       this.dialogVisible = true
    },
    editTech(id){
       this.specialId = id
       this.isEdit = true
       this.dialogVisible = true
    },
    delTech(id){
      this.$axios({
        url: this.BACKEND_API + '/api/v1/gap/custom/' + id,
        method: "delete",
        headers: getHeaderName(),
      }).then(res => {
        if(res.data.code == 200) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
          this.getTechList()
      })
    },
    editTechOver(){
      this.dialogEditVisible = false
      this.getTechList()
    },
    tableCurrentChange(val) {
      this.params.pageNo = val
      this.getTechList()
    },
    tableSizeChange(val) {
      this.params.pageSize = val
      this.getTechList()
    },
    changeFilter(value) {
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.getTechList()
    },
    submitDetail(val) {
        console.log(val)
        let data = val
        this.$axios({
          url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/gap/custom`,
          method: "post",
          headers: getHeaderName(),
          data: data
        }).then(res => {
            if(res.data.code == 200) {
                this.$message.success(res.data.message)
            } else {
                this.$message.error(res.data.message)
            }
            this.dialogVisible = false
            this.getTechList()
            
        })
    }
  }
}

</script>
<style lang="scss" scoped>
@import '../../assets/common/common.scss';

/deep/ .el-table th.gutter {
  display: table-cell !important;
}

/deep/ .el-dialog {
  min-height: 400px;
}

/deep/ .el-dialog__body {
  border-top: 1px solid #b2b2b2;
}

/deep/ .el-divider__text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  background-color: #e6a23c;
  padding: 6px 16px;
}

/deep/ .el-divider--horizontal {
  margin: 40px 0;
  height: 2px;
}
/deep/ .el-table td.cell-grey { 
  background-color:#909399 !important;
  color: #fff;
}
/deep/ .el-table td.cell-red { 
  background-color:#ff4949 !important;
  color: #fff;
}
/deep/ .el-table td.cell-yellow { 
  background-color:#ffba00 !important;
  color: #fff;
}
/deep/ .el-table td.cell-green { 
  background-color:#13ce66 !important;
  color: #fff;
}
/deep/ .el-table .cell {
  white-space: pre-line;
}
.icon-item {
  float: right;
  margin-top: 15px;
  cursor: pointer;
}
.icon-item img {
  width: 30px;
  height: 30px;
}
.hover-div {
  cursor: pointer;
}
.borders{
  border-bottom: 1px solid #dfe6ec;
}

#wrapper {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.box {
  display: flex;

  div {
    margin: auto;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.toTop {
  position: fixed;
  bottom: 80px;
  right: 25px;
  z-index: 10;
}

.details {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

.choose {
  padding: 20px 0;

  .flex-box {
    display: flex;
    flex-wrap: nowrap;

    .flexEl {
      flex: 1;
      margin: auto;
    }

    .text-align {
      text-align: center;
    }

    .el {
      flex: 0 0 90%;
    }
  }

  .time {
    position: absolute;
    top: 20px;
    right: 41%;
    font-size: 14px;
    color: #606266;
  }

  .newReport {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
.col-box {
  display: flex;
  margin-bottom: 10px;
  .col-span {
    min-width: 100px;
    line-height: 36px;
  }
}

.border {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.primary {
  color: #409EFF;
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}

.bgColor {
  background: #fff;
}

.pad {
  padding: 0 20px;
  padding-top: 20px;
}

.marT {
  margin-top: 20px;
}

.btn-group {
  text-align: right;
}

.mar {
  margin: 0 20px;
  margin-top: 20px;
}

.table {
  padding-bottom: 10px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
